<!doctype html>
<html>

<head>
<title>ZhiFeiJi - Platform</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="css/style.css">
<script src="js/gl-matrix.js" type="text/javascript"></script>
<script src="js/model.js" type="text/javascript" charset="UTF-8"></script>
<script src="js/model-obj.js" type="text/javascript" charset="UTF-8"></script>
<script src="js/view.js" type="text/javascript"></script>

<script id="shader-vs" type="x-shader/x-vertex">
    attribute vec3 vertexPos;
    uniform mat4 modelViewMatrix;
    uniform mat4 projectionMatrix;
    void main(void) {
        gl_PointSize = 5.0;
        // Return the transformed and projected vertex value
        gl_Position = projectionMatrix * modelViewMatrix * 
            vec4(vertexPos, 1.0);
    }
</script>

<script id="shader-fs" type="x-shader/x-fragment">
    precision mediump float;
    uniform vec4 uColor;
    void main(void) {
        // Return the pixel color: always output white
        gl_FragColor = vec4(uColor[0], uColor[1], uColor[2], 0.2);
    }
</script>

<script src="js/platform.js" type="text/javascript" charset="utf-8"></script>
</head>

<body>
    <canvas id="model-3d-canvas"></canvas>
    <canvas id="crease-pattern-canvas"></canvas>
    <div id="toolbar">
        <div class="toolbar-item">
            <label class="title" for="angle-input">Angle</label>
            <input id="angle-input" class="box-input" value="180">
        </div>
        <div class="toolbar-item" id="folding-tool-selector">
            <label class="title" for="angle-input">Folding Tool</label>
            <div class="radio-input">
                <label>
                    <input type="radio" name="folding-tool-type" value="line-folding" checked>
                    Fold Lines
                </label>
            </div>
            <div class="radio-input">
                <label>
                    <input type="radio" name="folding-tool-type" value="point-folding">
                    Fold Points
                </label>
            </div>
            <div class="radio-input">
                <label>
                    <input type="radio" name="folding-tool-type" value="crease-creator">
                    Create Crease
                </label>
            </div>
        </div>
        <div class="toolbar-item" id="smart-selection-checker">
            <label>
                <input type="checkbox" name="smart-select" checked>
                Smart Select
            </label>
        </div>
    </div>
</body>

</html>